<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <div class="min-h-screen bg-gray-50 px-6 py-8">
    <div class="mx-auto max-w-[1680px]">
      <!-- 头部区域 -->
      <div class="mb-8 flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-900">巡检报告</h1>
        <div class="flex items-center gap-4">
          <el-tag type="success" size="large">当日成功：{{compeleteTask(1)}}条</el-tag>
          <el-tag type="warning" size="large">当日未完成：{{compeleteTask(0)}}条</el-tag>
          <el-tag type="danger"  size="large">当日失败：{{compeleteTask(2)}}条</el-tag>
          <el-select
            v-model="busiId"
            placeholder="选择系统"
            class="!rounded-button"
            clearable
            @change="dailyTaskList"
          >
            <el-option
              v-for="system in systemList"
              :key="system.id"
              :label="system.name"
              :value="system.id"
            />
          </el-select>
          <el-select
            v-model="status"
            placeholder="状态筛选"
            class="!rounded-button"
            @change="dailyTaskList"
          >
            <el-option label="全部" value="" />
            <el-option label="成功" value="1" />
            <el-option label="失败" value="2" />
            <el-option label="未完成" value="0" />
          </el-select>
          <div class="relative">
            <el-input
              v-model="taskName"
              placeholder="搜索任务名称"
              class="w-64 !rounded-button"
              @change="dailyTaskList"
            >
              <template #prefix>
                <el-icon class="text-gray-400">
                  <search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <el-date-picker
            v-model="finishTime"
            type="date"
            placeholder="选择日期"
            class="!rounded-button"
            @change="dailyTaskList"
          />
        </div>
      </div>
      <!-- 系统分组展示 -->
      <div
        v-for="system in getFilteredsystemList"
        :key="system.name"
        class="mb-8"
      >
        <div v-if="getTasksBySystem(system).length>0">
          <div class="mb-4 flex items-center">
            <h2 class="text-xl font-bold text-gray-800">{{ system.name }}</h2>
            <div class="ml-4 h-[1px] flex-1 bg-gray-200"></div>
          </div>
          <!-- 表格数据 -->
          <el-table
            :data="getTasksBySystem(system)"
            border
            style="width: 100%"
          >
            <el-table-column width="150px" prop="id" label="id"/>
            <el-table-column width="200px" prop="busiType" label="任务类型"/>
            <el-table-column width="200px" prop="taskName" label="任务名称"/>
            <el-table-column width="730px" prop="taskStep" label="任务步骤"/>
            <el-table-column width="200px" prop="finishTime" label="完成时间"/>
            <el-table-column width="200px" prop="status" label="任务状态">
              <template #default="scope">
                <el-tag v-if="scope.row.status=='0'" type="warning">未完成</el-tag>
                <el-tag v-if="scope.row.status=='1'" type="success">成功</el-tag>
                <el-tag v-if="scope.row.status=='2'" type="danger">失败</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script name="data" setup>
import { ref, computed } from "vue";
import { Search, Clock, User } from "@element-plus/icons-vue";
import {dailyTask} from "@/api/operation/itdutytaskList"
import {getSysList} from "@/api/operation/sqltool";
import {parseTime} from "@/utils/ruoyi";
const status = ref("");
const taskName = ref("");
const finishTime = ref(new Date());
const busiId = ref("");

const systemList = ref([])
const tasks = ref([]);

const getTasksBySystem = (system) => {
  return tasks.value.filter((task) => task.busiId === system.id);
};

const getFilteredsystemList = computed(() => {
  if (busiId.value) {
    return systemList.value.filter((system) => system.id === busiId.value);
  }
  return systemList.value.filter((system) => system.id); // 排除"全部系统"选项
});

const compeleteTask = (status)=>{
  return tasks.value.filter(tasks=>tasks.status==status).length
};

function getBusiList(){
  getSysList().then(response => {
    systemList.value = response.rows;
    console.log(systemList,"====");
  });
}
function dailyTaskList(){
  const data = {
    busiId: busiId.value,
    taskName: taskName.value,
    queryTime: parseTime(finishTime.value, "{y}{m}{d}"),
    status: status.value,
  }
  dailyTask(data).then(response => {
    tasks.value = response;
    console.log(response,"====");
    console.log(tasks,"====");
  });
}
dailyTaskList()
getBusiList();
</script>

<style scoped>
.el-input__inner {
  @apply border-gray-300;
}
.el-select__input {
  @apply border-none;
}
</style>
